<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>H+移动工作平台 - 我的出差</title>
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <link rel="stylesheet" href="../css/styles.css">
  <script src="https://cdn.jsdelivr.net/npm/handlebars@4.7.8/dist/handlebars.min.js"></script>
  <script src="../js/handlebars-helpers.js"></script>
  <script src="../js/templates.js"></script>
  <script src="../js/template-renderer.js"></script>
</head>
<body>
  <div class="device-container" id="app">
    <!-- 页面内容将通过JavaScript动态渲染 -->
  </div>

  <script>
    // 页面数据
    const pageData = {
      pageTitle: '我的出差',
      backUrl: 'finance.html',
      rightIcon: 'ellipsis-h',
      activeTab: 'finance',
      searchPlaceholder: '搜索出差申请',
      filterTags: ['全部', '待提交', '审批中', '已通过', '已驳回', '已撤销'],
      activeTag: '全部',
      travelApplies: [
        {
          id: 1,
          title: '北京出差',
          applyDate: '2024-03-25',
          startDate: '2024-04-10',
          endDate: '2024-04-15',
          location: '北京',
          estimatedCost: 4500.00,
          status: '审批中',
          statusType: 'blue',
          statusDesc: '1/2 审批节点'
        },
        {
          id: 2,
          title: '上海医学会议',
          applyDate: '2024-03-15',
          startDate: '2024-03-20',
          endDate: '2024-03-22',
          location: '上海',
          estimatedCost: 3200.00,
          status: '已通过',
          statusType: 'green',
          statusDesc: '2/2 审批节点'
        },
        {
          id: 3,
          title: '广州培训',
          applyDate: '2024-02-28',
          startDate: '2024-03-05',
          endDate: '2024-03-08',
          location: '广州',
          estimatedCost: 2800.00,
          status: '已通过',
          statusType: 'green',
          statusDesc: '2/2 审批节点'
        },
        {
          id: 4,
          title: '成都学术交流',
          applyDate: '2024-02-15',
          startDate: '2024-02-20',
          endDate: '2024-02-23',
          location: '成都',
          estimatedCost: 3500.00,
          status: '已驳回',
          statusType: 'red',
          statusDesc: '预算超标'
        },
        {
          id: 5,
          title: '武汉项目合作',
          applyDate: '2024-01-20',
          startDate: '2024-01-25',
          endDate: '2024-01-27',
          location: '武汉',
          estimatedCost: 2600.00,
          status: '已撤销',
          statusType: 'gray',
          statusDesc: '项目取消'
        }
      ],
      travelStats: {
        yearCount: 5,
        yearDays: 15,
        yearCost: 16600.00,
        pendingCount: 1
      }
    };

    // 页面内容模板
    const pageContentTemplate = Handlebars.compile(`
      <!-- 搜索栏 -->
      {{> search-bar placeholder=searchPlaceholder}}
      
      <!-- 筛选标签 -->
      {{> filter-tags tags=filterTags active-tag=activeTag}}
      
      <!-- 创建按钮 -->
      <div class="p-4">
        <a href="travel_apply.html" class="btn btn-primary w-full flex items-center justify-center">
          <i class="fas fa-plus mr-2"></i>
          <span>创建出差申请</span>
        </a>
      </div>
      
      <!-- 出差申请列表 -->
      <div class="card mx-4 mb-4">
        <div class="card-header">
          <span>我的申请</span>
          <span class="text-sm text-gray-500">共{{travelApplies.length}}条</span>
        </div>
        <div class="card-body p-0">
          {{#each travelApplies}}
            <a href="travel_detail.html?id={{this.id}}" class="list-item">
              <div>
                <div class="flex items-center">
                  <i class="fas fa-plane text-blue-500 mr-2"></i>
                  <span class="font-medium">{{this.title}}</span>
                </div>
                <div class="flex items-center text-xs text-gray-500 mt-1">
                  <span>申请日期：{{this.applyDate}}</span>
                  <span class="mx-2">|</span>
                  <span>出差日期：{{this.startDate}} 至 {{this.endDate}}</span>
                </div>
                <div class="flex items-center text-xs text-gray-500 mt-1">
                  <span>出差地点：{{this.location}}</span>
                  <span class="mx-2">|</span>
                  <span>预计费用：{{formatMoney this.estimatedCost}}</span>
                </div>
              </div>
              <div class="flex flex-col items-end">
                <span class="tag tag-{{this.statusType}}">{{this.status}}</span>
                <span class="text-xs text-gray-500 mt-1">{{this.statusDesc}}</span>
              </div>
            </a>
          {{/each}}
        </div>
      </div>
      
      <!-- 出差统计 -->
      <div class="card mx-4 mb-4">
        <div class="card-header">
          <span>出差统计</span>
        </div>
        <div class="card-body">
          <div class="flex justify-between mb-3">
            <div class="text-gray-500">本年度出差次数</div>
            <div class="font-medium">{{travelStats.yearCount}}次</div>
          </div>
          <div class="flex justify-between mb-3">
            <div class="text-gray-500">本年度出差总天数</div>
            <div class="font-medium">{{travelStats.yearDays}}天</div>
          </div>
          <div class="flex justify-between mb-3">
            <div class="text-gray-500">本年度出差总费用</div>
            <div class="font-medium">{{formatMoney travelStats.yearCost}}</div>
          </div>
          <div class="flex justify-between">
            <div class="text-gray-500">待审批出差</div>
            <div class="font-medium text-blue-500">{{travelStats.pendingCount}}次</div>
          </div>
        </div>
      </div>
      
      <!-- 差旅标准提示 -->
      {{> alert title="差旅标准提醒" content="请注意遵守公司差旅标准，超标部分将不予报销。" type="info" link-text="查看标准" link-url="travel_standard.html"}}
    `);

    // 注册部分模板
    Handlebars.registerPartial('status-bar', document.getElementById('status-bar-template').innerHTML);
    Handlebars.registerPartial('nav-bar', document.getElementById('nav-bar-template').innerHTML);
    Handlebars.registerPartial('tab-bar', document.getElementById('tab-bar-template').innerHTML);
    Handlebars.registerPartial('search-bar', document.getElementById('search-bar-template').innerHTML);
    Handlebars.registerPartial('filter-tags', document.getElementById('filter-tags-template').innerHTML);
    Handlebars.registerPartial('alert', document.getElementById('alert-template').innerHTML);

    // 页面模板
    const pageTemplate = Handlebars.compile(`
      {{> status-bar}}
      
      {{> nav-bar back-url=backUrl title=pageTitle right-icon=rightIcon}}
      
      <div class="app-content">
        ${pageContentTemplate.source}
      </div>
      
      {{> tab-bar active-tab=activeTab}}
    `);

    // 渲染页面
    document.getElementById('app').innerHTML = pageTemplate(pageData);
  </script>

  <!-- 组件模板 -->
  <script id="status-bar-template" type="text/x-handlebars-template">
    <div class="status-bar">
      <div class="status-bar-left">
        <span class="time">9:41</span>
      </div>
      <div class="status-bar-right">
        <i class="fas fa-signal signal"></i>
        <i class="fas fa-wifi wifi"></i>
        <i class="fas fa-battery-full battery"></i>
      </div>
    </div>
  </script>

  <script id="nav-bar-template" type="text/x-handlebars-template">
    <div class="nav-bar">
      <div class="nav-left">
        <a href="{{back-url}}"><i class="fas fa-arrow-left"></i></a>
      </div>
      <div class="nav-title">{{title}}</div>
      <div class="nav-right">
        {{#if right-icon}}
          <i class="fas fa-{{right-icon}}"></i>
        {{/if}}
      </div>
    </div>
  </script>

  <script id="tab-bar-template" type="text/x-handlebars-template">
    <div class="tab-bar">
      <a href="home.html" class="tab-item {{#if (eq active-tab 'home')}}active{{/if}}">
        <i class="fas fa-home tab-icon"></i>
        <span>首页</span>
      </a>
      <a href="asset.html" class="tab-item {{#if (eq active-tab 'asset')}}active{{/if}}">
        <i class="fas fa-laptop tab-icon"></i>
        <span>资产</span>
      </a>
      <a href="finance.html" class="tab-item {{#if (eq active-tab 'finance')}}active{{/if}}">
        <i class="fas fa-wallet tab-icon"></i>
        <span>财务</span>
      </a>
      <a href="material.html" class="tab-item {{#if (eq active-tab 'material')}}active{{/if}}">
        <i class="fas fa-box tab-icon"></i>
        <span>物资</span>
      </a>
      <a href="profile.html" class="tab-item {{#if (eq active-tab 'profile')}}active{{/if}}">
        <i class="fas fa-user tab-icon"></i>
        <span>我的</span>
      </a>
    </div>
  </script>

  <script id="search-bar-template" type="text/x-handlebars-template">
    <div class="search-bar">
      <i class="fas fa-search search-icon"></i>
      <input type="text" class="search-input" placeholder="{{placeholder}}">
    </div>
  </script>

  <script id="filter-tags-template" type="text/x-handlebars-template">
    <div class="flex overflow-x-auto p-2 bg-white">
      {{#each tags}}
        <div class="flex-shrink-0 px-3 py-1 mx-1 rounded-full {{#if (eq this ../active-tag)}}bg-blue-500 text-white{{else}}bg-gray-100 text-gray-600{{/if}} text-sm">{{this}}</div>
      {{/each}}
    </div>
  </script>

  <script id="alert-template" type="text/x-handlebars-template">
    <div class="bg-{{type}}-50 rounded-lg p-4 mx-4 mb-4 flex items-start">
      <i class="fas fa-{{#if (eq type 'info')}}info-circle{{else if (eq type 'warning')}}exclamation-circle{{else if (eq type 'success')}}check-circle{{else if (eq type 'danger')}}exclamation-triangle{{/if}} text-{{type}}-500 mt-0.5 mr-2"></i>
      <div>
        <div class="text-sm font-medium text-{{type}}-{{#if (eq type 'warning')}}700{{else}}500{{/if}}">{{title}}</div>
        <div class="text-xs text-gray-600 mt-1">
          {{content}}
          {{#if link-text}}
            <a href="{{link-url}}" class="text-{{type}}-500">{{link-text}} &gt;</a>
          {{/if}}
        </div>
      </div>
    </div>
  </script>
</body>
</html> 